<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>09_Vue实例_生命周期</title>
	</head>
	<body>
		<!--
			1. vue对象的生命周期
			  1). 初始化显示
				* beforeCreate()
				* created()
				* beforeMount()
				* mounted()  //挂载
				
			  2). 更新状态
				* beforeUpdate()
				* updated()
			  3). 销毁vue实例: vm.$destory()
			  
				* beforeDestory()
				* destoryed()
			2. 常用的生命周期方法
			  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
			  beforeDestory(): 做收尾工作, 如: 清除定时器
		-->
	
		<div id="test">
			<button @click="destroyVue">destory vue</button>
			
			<p v-if="isShow">Vue 声明周期</p>
		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#test',
				data: {
					isShow: true
				},

				//生命周期钩子函数 mounted
				//初始化显示之后立即调用(调用1次)
				mounted() {
					// 执行异步任务
					//使用剪头函数,只要是回调函数是就用剪头函数,本身没有this,使用外部的this
					this.intervalId = setInterval(() => {
						console.log('-----')
						this.isShow = !this.isShow
					}, 1000)
				},

				// 执行收尾的工作
				//生命周期钩子函数 beforeDestory  死亡之前调用1次
				beforeDestroy() {
					console.log('beforeDestroy()')
					//清除定时器
					clearInterval(this.intervalId)
				},

				methods: {
					destroyVue() {
						//干掉VM
						this.$destroy()
						//利用声明周期钩子函数,清除interval
					}
				}
			})
		</script>
	</body>
</html>
